<template>
  <div class="flex">
    <img alt="" class="w-11 h-11 rounded" :src="showImg" />
    <div class="text-xs w-52 ml-2 flex flex-col justify-between">
      <!-- truncate 文字超出省略 -->
      <div class="truncate">
        <!-- 是否试听 -->
        <span v-if="isAudition" class="mr-2 text-red-400 bg-red-100 p-1 rounded-lg">试听</span>
        <span class="cursor-pointer text-gray-600">{{ musicInfo?.name ?? '云音乐' }}</span>
        <span class="text-gray-500">&nbsp;-&nbsp;</span>
        <span class="cursor-pointer text-gray-400">{{ (musicInfo?.ar && musicInfo?.ar[0]?.name) ?? '一起听' }}</span>
      </div>
      <div class="flex gap-3">
        <IconPark class="icon-hover" :icon="Like" :size="18" :stroke-width="3" />
        <IconPark class="icon-hover" :icon="DownTwo" :size="18" :stroke-width="3" />
        <IconPark class="icon-hover" :icon="MoreTwo" :size="18" :stroke-width="3" />
        <IconPark class="icon-hover" :icon="MessageOne" :size="18" :stroke-width="3" />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import defImg from '@/assets/img/def-img.png'
import IconPark from '@/components/icon-park/IconPark.vue'
import { Like, DownTwo, MoreTwo, MessageOne } from '@icon-park/vue-next'
import { usePlayerStore } from '@/stores/player'
import { toRefs, computed } from 'vue'

const { musicInfo, isAudition } = toRefs(usePlayerStore())
const showImg = computed(() => musicInfo.value?.al?.picUrl ?? defImg)
</script>

<style lang="less" scoped></style>
